<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播</title>
		<style type="text/css">
			.lb {
				width: 640px;
				height: 270px;
				margin: 10px auto;
			}
			
			#left-arrow {
				position: relative;
				display: inline-block;
				top: -180px;
				z-index: 999;
				cursor: pointer;
			}
			
			#right-arrow {
				position: relative;
				display: inline-block;
				top: -180px;
				right: -540px;
				z-index: 999;
				cursor: pointer;
			}
			#num-btn span{
				display:inline-block;
				font-size:20px;
	            width:23.2px;
	            font-family: arial;
	            text-align: center;
	            border: 1px solid #fff;
	            border-radius: 50%;
	            color: #fff;
	            cursor: pointer;
	            margin-left: 10px;
			}
			#num-btn{
				position: relative;
				top: -100px;
				left: 35%;
			} 
		</style>
	</head>

	<body>
		<div class="lb">
			<img src="img/1.jpg/" id="img" />
			<img src="img/btn_l.png" id="left-arrow" />
			<img src="img/btn_r.png" id="right-arrow" />
			<div id="num-btn"><span style="background: #f00;">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span></div>
		</div>
		<script type="text/javascript">
			var left = document.getElementById("left-arrow");
			var right = document.getElementById("right-arrow");
			var img = document.getElementById("img");
			var index = 1;
			var btns=document.getElementById("num-btn").childNodes;
			//按钮执行
			for(var i=0;i<btns.length;i++){
				btns[i].onclick=(function () {
					var j=i+1;
					return function () {
						index=j;
						img.src="img/"+index+".jpg"
						changebg();
					}
				})();
			}
			function changebg(i) {
				for(var i=0;i<btns.length;i++){
					btns[i].style.background="#000"
				}
				btns[index-1].style.background="#f00"
			}
			var moveLeft = function() {
				index++;
				if (index > 7) index = 1;
				img.src = "img/" + index + ".jpg";
				changebg()
			}
			right.onclick = moveLeft;
			left.onclick = function() {
				index--;
				if (index < 1) index = 7;
				img.src = "img/" + index + ".jpg";
				changebg()
			}
			var timer = setInterval(moveLeft, 2000);
			var lb = document.getElementsByClassName("lb")[0];
			lb.onmouseover = function() {
				clearInterval(timer);
			}
			lb.onmouseout = function() {
				timer = setInterval(moveLeft, 2000);
			}
		</script>

	</body>

</html>